<template>
  <com-header title="买号列表" right="添加" @clickRight="add" back="/my"></com-header>
  <div
    class="padded-10 van-hairline--bottom"
    v-for="(item, index) in list"
    :key="index"
  >
    <van-row class="p-b-5" justify="space-between" align="center">
      <van-col>
        <span class="text-3 ftn14 p-r-10" v-text="item.username"></span>
        <van-tag color="#1baeae" size="medium">{{ item.status }}</van-tag>
      </van-col>
    </van-row>
    <van-row justify="space-between" align="center" class="ftn12">
      <van-col class="text-7"> [{{ item.typename }}] </van-col>
      <van-col>
        <van-button color="#999" plain size="mini" @click="del(item.id)"
          >删除</van-button
        >
        <van-button color="#1baeae" plain size="mini" @click="check(item.id)">查看</van-button>
        <van-button color="#1baeae" plain size="mini" @click="edit(item.id)">修改</van-button>
      </van-col>
    </van-row>
  </div>
  <Check :id="checkParams.id" :show="checkParams.show" @close="checkParams.show = false"></Check>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, defineAsyncComponent } from "vue";
import { useStore } from "@/stores/store";
import { useRouter } from "vue-router";
import { getAccountList, delAccount } from "@/service/account";
import { fnDialog, fnMsg } from "@/plugins/common";
type IList = {
  id: number;
  reason: string;
  status: string;
  type: string;
  typename: string;
  username: string;
};
export default defineComponent({
  components: {
    Check: defineAsyncComponent(
      () => import("@/views/account/component/check.vue")
    ),
  },
  setup() {
    const store = useStore(),
      list = ref<IList[]>([]),
      router = useRouter(), checkParams = ref({id: 0, show: false});
    const getData = () => {
      getAccountList({ uid: store.state.user.uid }).then((res) => {
        console.log(res);
        if (res) {
          list.value = res.data;
        }
      });
    };

    const add = () => {
      router.push({ name: "account_add", query: { title: "添加买号" } });
    };

    const del = (id: Number) => {
      fnDialog("提示", "确认删除此买号信息吗?")
        .then(() => {
          delAccount({ uid: store.state.user.uid, id: id }).then((res) => {
            if (res) {
              fnMsg(res.msg);
              if (res.status) {
                let index = list.value.findIndex((item: any) => id == item.id);
                list.value.splice(index, 1);
              }
            }
          });
        })
        .catch(() => {
          fnMsg("取消删除");
        });
    };

    const edit = (id: any) => {
        router.push({ name: "account_edit", params: { id: id } });
    }

    const check = (id: number) => {
      checkParams.value = {
        id: id,
        show: true
      };
    }

    onMounted(() => {
      getData();
    });

    return {
      list,
      add,
      del,
      edit,
      check,
      checkParams
    };
  },
});
</script>
